Media Helpers

Layout support for media items

Aspect Ratios ( w : h )

.media__ratio--square
1 : 1
.media__ratio--full
4 : 3
.media__ratio--frame
3 : 2
.media__ratio--wide
16 : 9
.media__ratio--double
2 : 1
.media__ratio--triple
3 : 1
.media__ratio--triple-triple
3.75 : 1
.media__ratio--quad
4 : 1
.media__ratio--quad-double
4.5 : 1

Object Fit

.media__fit--fill
.media__fit--contain
.media__fit--cover
.media__fit--none
.media__fit--scale-down

Media Bleed

.media__bleed--full
.media__bleed--right.media__bleed--half
.media__bleed--left.media__bleed--half

Using these classes

These classes will fill available container width and include these styles in addition to the ratios. 

.{class} {
    width: 100%;
    object-fit: cover;
}
The ratio class should be added to the media asset directly.